<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디/비밀번호 찾기</title>
<style type="text/css">
	#find_wrap{
		position: relative;
		width: 700px;
		margin-left: 200px;
		
	}
	#find_title{
		width: 700px;
	}
	#find_middle_id{
		width: 700px;
		height: 169px;
		text-align: center;
		position: relative;
	}
	#find_middle_box{
		padding: 10px 0;
		border: none;
		vertical-align: middle;
	}
	#input_bottom{
		width: 700px;
		height: 169px;
		text-align: center;
		position: relative;
	}
	#input_name{
		position: absolute;
		top:66px;
		left: 170px;
	}
	#input_name img{
		margin-right: 20px;
	}
	.find_input{
		border: 1px solid #dcdcdc;
		height: 16px;
		letter-spacing: normal;
		word-spacing: normal;
		text-transform: none;
		text-indent: 0px;
		text-shadow: none;
		display: inline-block;
		text-align: start;
	}
	.find_input:focus{
		 background:#f7f3ed; 
		 border:1px solid #706047; 
	}
	#input_phone, #input_email{
		position: absolute;
		top: 91px;
		left:170px;
	}
	#input_phone img{
		margin-right: 9px;
	}
	#input_email img{
		margin-right: 9px;
	}
	.id_btn_ok{
		width:80px;
		height:50px;
		background-color:#993B3B;
		font-family: "맑은 고딕";
		font-size:10pt;
		color:white;
		border:0;
		border-radius: 5px;
		position: absolute;
		top: 80px;
		left: 439px;
	}
	.btn{
		width:130px;
		height:30px;
		margin-right:10px;
		background-color: #0D836B;
		font-family: "맑은 고딕";
		font-size:9pt;
		color:white;
		border: 0;
		border-radius: 5px;
	}
	.err_font{
		font-family: Verdana;
		color: red;
	}
</style>
<script type="text/javascript">
	function checkIt(){
		var user = document.emailForm;
		
		if(user.name.value==''){
			alert('이름을 입력하세요!');
			user.name.focus();
			return false;
		}
		if(user.phone.value==''){
			alert('연락처를 입력하세요!');
			user.phone.focus();
			return false;
		}
	}
	function checkIt2(){
		var user2 = document.passForm;
		
		if(user2.name.value==''){
			alert('이름을 입력하세요!');
			user2.name.focus();
			return false;
		}
		if(user2.email.value==''){
			alert('메일을 입력하세요!');
			user2.email.focus();
			return false;
		}
	}
</script>
</head>
<body>
<div id="find_wrap">
	<div id="find_title">
		<p>
			<img src="./images/member/title_find.png">
		</p>
	</div>
	<form:form commandName="memberCommand" action="findEmail.do" method="post" name="emailForm" onsubmit="return checkIt()">
		<div id="find_middle_id">
			<fieldset id="find_middle_box">
				<p>
              		<img src="./images/member/info_find.png">
				</p>
				<p id="input_name">
					<img src="./images/member/txt_name.png">
					<form:input path="name" name="name" class="find_input" size="26" style="width: 170px;" title="입력하세요"/>
				</p>
				<p id="input_phone">
					<img src="./images/member/txt_phone.png">
					<form:input path="phone" name="phone" class="find_input" size="11" style="width: 170px;" title="입력하세요"/><br>
				</p>
				<p>
					<input type="hidden" name="count" value="1">
					<input type="submit" value="확 인" class="id_btn_ok" style="cursor: pointer">
				</p>
			</fieldset>
		</div>
		<c:if test="${count == 1}">
		<div style="margin-left: 230px;">
			<p style="font-family: nanum; color:#7a7a7a; size: 10pt;">찾으시는 메일은<br><font class="err_font"><b>${member.email}</b></font> 입니다 <br><br></p>
		</div>
		</c:if>
		<c:if test="${count == 0}">
		<div style="margin-left: 230px;">
			<p style="font-family: nanum; color:#7a7a7a; size: 10pt;">정보에 맞는 이메일이 없습니다. <br><br></p>
		</div>
		</c:if>
	</form:form>
	<form:form commandName="memberCommand" action="findPass.do" method="post" name="passForm" onsubmit="return checkIt2()">
		<div id="find_middle_id">
			<fieldset id="find_middle_box">
				<p>
					<img src="./images/member/info_find_02.png">
				</p>
				<p id="input_name">
					<img src="./images/member/txt_name.png">
					<form:input path="name" class="find_input" size="26" style="width: 170px;" name="name" title="입력하세요"/>
				</p>
				<p id="input_email">
					<img src="./images/member/txt_email.png">
					<form:input path="email" class="find_input" style="width: 170px;" name="email" title="입력하세요"/>
				</p>
				<p>
					<input type="hidden" name="count" value="2">
					<input type="submit" value="확 인" class="id_btn_ok" style="cursor: pointer">
				</p>
			</fieldset>
		</div>
		<c:if test="${count == 2}">
		<div style="margin-left: 230px;">
			<p style="font-family: nanum; color:#7a7a7a; size: 10pt;">찾으시는 비밀번호는<br><font class="err_font"><b>${member.passwd}</b></font> 입니다 <br><br></p>
		</div>
		</c:if>
		<c:if test="${count == 3}">
		<div style="margin-left: 230px;">
			<p style="font-family: nanum; color:#7a7a7a; size: 10pt;">입력하신 정보가 틀렸습니다. <br><br></p>
		</div>
		</c:if>
	</form:form>
	<p id="input_bottom">
		<input type="button" onclick="location.href='index.do'" value="메인으로" class="btn" style="cursor: pointer">
		<input type="button" onclick="location.href='login.do'" value="로그인" class="btn" style="cursor: pointer">
		<input type="button" onclick="location.href='insert.do'" value="회원가입" class="btn" style="cursor: pointer">
	</p>
</div>

</body>
</html>